<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:m="http://code.google.com/p/gmaps4jsf/">

<ui:composition template="../templates/layout.xhtml">

        <ui:define name="title">Welcome to GMaps4JSF Examples</ui:define>
        <ui:define name="ajaxIncludes"></ui:define>
        
        <ui:define name="mashup">
		  	<h1>Click on the polygon and the polyline</h1>	  	
		  	<h:form id="form1">
				<m:map width="700px" height="700px" latitude="24" longitude="15" zoom="2">
					<m:polygon lineWidth="1">
						<m:point latitude="30.01" longitude="31.14"/>
						<m:point latitude="-33" longitude="19"/>    				
						<m:point latitude="39" longitude="-101"/>  	
						<m:point latitude="30.01" longitude="31.14"/>
						<m:eventListener eventName="click" jsFunction="polgonClickHandler"/>	    				    								
					</m:polygon>
					<m:polyline lineWidth="10" hexaColor="#ff0000" geodesic="true">
						<m:point latitude="30.01" longitude="31.14"/>
						<m:point latitude="48" longitude="2"/>    				
						<m:point latitude="43" longitude="141"/>  	   								
						<m:eventListener eventName="click" jsFunction="polylineClickHandler"/>	    				
					</m:polyline>   	         			
				</m:map>	     
    		</h:form>
		  	
		    <script>
			   	function polgonClickHandler() {
			   		alert("You clicked on the area of (Egypt, South Africa, USA)");  	 	
			   	}
			   	function polylineClickHandler() {
			   		alert("You clicked on the line of (Egypt, France, Japan)");  
			   	}		   		   	
		    </script>    		
    		
        </ui:define>

</ui:composition>
</html>  